<template>
  <div class="wrap">
    <div class="tab">
      <div class="tabItem" v-for="(val, index) in tab" :key="index" @click="ToDetail(val.path)">
        <Svgview :ion="val.icon" />
        <p>{{ val.title }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import Svgview from "@/components/SvgView";
import { useRouter } from "vue-router";
import { useMusicStore } from "@/store/store";
import { getFM } from '../../../assets/axios/api'

const musicStore = useMusicStore()
const router = useRouter()
const tab = [
  {
    title: "推荐",
    icon: "#icon-tuijian",
    path: '/recommend'
  },
  {
    title: "私人FM",
    icon: "#icon-diantai",
    path: ''
  },
  {
    title: "歌单",
    icon: "#icon-gedan",
    path: '/songList'
  },
  {
    title: "排行榜",
    icon: "#icon-paihangbang",
    path: '/ranking'
  },
  {
    title: "有声书",
    icon: "#icon-yinle",
    path: '/book'
  },
  {
    title: "VIP歌单",
    icon: "#icon-vip",
    path: '/vipMusicList'
  },
  {
    title: "数字专辑",
    icon: "#icon-yinlezhuanji",
    path: '/mathAlbum'
  },
  {
    title: "直播",
    icon: "#icon-zaixianzhibo",
    path: '/live'
  },
];
const ToDetail = async (path) => {
  if (path) {
    router.push(path)
  } else {
    let res = await getFM()
    musicStore.changePlayList(res.data.data)
    musicStore.changePlayIndex(0, 0)
    musicStore.getMusicLyric()
    musicStore.changePlayReady(true)
    musicStore.changeFM(true)
    musicStore.changePlayPop(true)
  }
}
</script>

<style scoped lang="less">
.wrap {
  background-color: white;
  height: 70px;
  overflow-y: hidden;

  .tab {
    overflow-y: scroll;
    white-space: nowrap;
    height: 80px;
    padding-top: 10px;

    .tabItem {
      display: inline-block;
      text-align: center;
      width: 90px;

      .icon {
        width: 30px;
        height: 30px;
      }

      p {
        font-size: 15px;
        margin: 5px 0;
      }
    }
  }
}
</style>
